<template>
  <!-- 分院首页 -->
  <div class="homepage">
    <div class="curr_back">
      <img src="../../../static/image/currentduan.png" />
    </div>
    <div class="home_tab">
      <div class="tab_name">
        <span>{{ nickName }}</span>
        <div>
          <img
            class="icon"
            src="../../../static/image/qrcode.png"
            @click="logo()"
          />
        </div>
      </div>
      <form action="javascript:return true;">
        <input
          type="search"
          placeholder="搜索业务员"
          v-model="user"
          @keyup.13="show()"
          ref="input1"
        />
      </form>
    </div>

    <div style="width: 100%;">
      <div class="hom_back">
        <div class="nav" @click="general">
          <div
            style="
              background: #fff;
              height: 1.65rem;
              border-radius: 0.2rem 0.2rem 0 0;
              box-sizing: border-box;
            "
          >
            <span
              style="margin-left: 0.39rem; font-size: 0.32rem; color: #212c67;"
              >业务总览</span
            >
            <div class="nav_item" style="font-size: 0.24rem;">
              <span>销售总额</span>
              <span>昨日销售</span>
            </div>
          </div>
          <div class="nav_item1">
            <div>￥{{ grossIncome }}</div>
            <div
              style="
                height: 0.8rem;
                width: 0.005rem;
                border-left: 0.005rem solid #ccc;
                margin-top: 0.2rem;
              "
            ></div>
            <div>+{{ yesterdayIncome }}</div>
          </div>
        </div>
      </div>
      <div class="total">
        <div class="total_item">
          <span>用户总数</span>
          <div>{{ userCount }}</div>
        </div>
        <div class="total_item">
          <span>付费用户总数</span>
          <div>{{ paymentUserCount }}</div>
        </div>
      </div>
      <div class="ranking">
        <div class="fenbu">
          <span style="margin-left: 0.45rem; font-size: 0.32rem;"
            >业务员列表</span
          >
          <div @click="more">查看更多></div>
        </div>
        <div>
          <div
            class="ran_oitem"
            v-for="(item, index) in list"
            :key="index"
            @click="listdetails(item)"
          >
            <span
              style="
                margin-left: 0.32rem;
                width: 3.58rem;
                overflow: hidden;
                span-overflow: ellipsis;
                white-space: nowrap;
              "
              >{{ item.nickName }}</span
            >
            <span style="margin-right: 0.53rem; color: #666666;"
              >开单：{{ item.directPromotionQuantity }}</span
            >
          </div>
        </div>
      </div>
      <div class="ranking" v-show="nothing" style="margin-bottom: 2rem;">
        <img src="../../../static/image/nothing.png" alt />
        <div class="ranking_zi">没有更多数据</div>
      </div>
      <!-- 分院二维码 -->
      <div
        class="pop"
        v-if="pop"
        @click="pop = false"
        @touchmove.prevent
        @click.self="pop = false"
      ></div>
      <div
        style="width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);"
        @touchmove.prevent
        @click.self="pop = false"
      >
        <div class="pop_message" v-if="pop">
          <img :src="qrUrl" @click="dada(qrUrl)" />
          <div>通过此二维码扫描注册公众号的用户，参与推广赚取佣金</div>
        </div>
      </div>
    </div>
    <footer>
      <Footers></Footers>
    </footer>
  </div>
</template>
<script>
import axios from "axios";
import { Branch, Salesmanlist } from "../../api/api";
import querystring from "query-string";
import { Indicator, Toast } from "mint-ui";
import Footers from "./footer";

export default {
  name: "Bhome",
  components: {
    Footers,
  },
  data() {
    return {
      Salesmanlist: "",
      arr: [],
      pop: false,
      qrUrl: "",
      nickName: "",
      user: "",
      grossIncome: "",
      yesterdayIncome: "",
      userCount: "",
      paymentUserCount: "",
      list: "",
      nothing: false,
    };
  },
  methods: {
    //分院概览
    branch() {
      Indicator.open("加载中...");
      var params = {
        branchId: JSON.parse(localStorage.getItem("user")).branchId,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Branch(params, a).then((res) => {
        if (res.data.code == 1) {
          this.grossIncome = res.data.data.grossIncome / 100;
          this.yesterdayIncome = res.data.data.yesterdayIncome / 100;
          this.userCount = res.data.data.userCount;
          this.paymentUserCount = res.data.data.paymentUserCount;
          this.list = res.data.data.salesmanList;
          if (this.list == "") {
            this.nothing = true;
          } else {
            this.nothing = false;
          }
          Indicator.close();
        } else {
          Indicator.close();
          Toast(res.data.message);
        }
      });
    },
    goout() {
      localStorage.clear();
      this.$router.push({ path: "/" });
    },
    //点击弹出分院二维码
    logo() {
      this.pop = true;
    },
    //跳转更多业务员列表
    more() {
      this.$router.push("/Branch/more");
    },
    //点击跳转业务员详情
    listdetails(item) {
      this.$router.push({
        path: "/Branch/branchdetail",
        query: { openId: item.openId },
      });
    },
    //搜索
    show() {
      this.$refs.input1.blur();
      console.log(this.user);
      var params = {
        pageNo: 1,
        branchId: JSON.parse(localStorage.getItem("user")).branchId,
        pageSize: 20,
        nickName: this.user,
      };
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Salesmanlist(params, a).then((res) => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.list = res.data.data;
          // console.log(this.list == 0);
          if (this.list == "") {
            this.nothing = true;
          } else {
            this.nothing = false;
          }
        } else {
          Indicator.close();
          Toast(res.data.message);
        }
      });
    },
    //跳转订单
    general() {
      this.$router.push("/Branch/orderdetails");
    },
    //点击放大图片
    dada(url) {
      var img = [];
      img.push(url);
      WeixinJSBridge.invoke("imagePreview", {
        urls: img,
        current: url,
      });
    },
  },
  mounted() {
    this.branch();
    this.nickName = JSON.parse(localStorage.getItem("user")).nickName;
    this.qrUrl = JSON.parse(localStorage.getItem("user")).qrUrl;
  },
};
</script>
<style lang="scss" scoped>
.homepage {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1.5rem;
}
.goout {
  position: absolute;
  font-size: 0.25rem;
  color: #cfcfcf;
  top: 0.6rem;
  left: 0.4rem;
}
.curr_back {
  width: 100%;
  height: 1.7rem;
  position: relative;
}

.curr_back img {
  width: 100%;
  height: 100%;
}

.home_tab {
  width: 100%;
  height: 1.4rem;
  display: flex;
  align-items: center;
  background: #fff;
  box-sizing: border-box;
  padding: 0.29rem;
}

.home_tab .tab_name {
  font-size: 0.3rem;
  width: 3.52rem;
  display: flex;
  align-items: center;
}

.tab_name .icon {
  width: 0.38rem;
  height: 0.38rem;
  margin-left: 0.19rem;
  align-items: center;
}

.home_tab input {
  width: 3.52rem;
  height: 0.72rem;
  font-size: 0.26rem;
  box-sizing: border-box;
  background: #dfe2ee;
  padding-left: 0.15rem;
  border: none;
}

.hom_back {
  width: 100%;
  height: auto;
  margin-top: 0.3rem;
}

.nav {
  width: 6.94rem;
  height: auto;
  margin: auto;
  border-radius: 20rem;
}

.nav_item {
  display: flex;
  justify-content: space-between;
  margin: 0.3rem 0.3rem 0 0.4rem;
  color: #212c68;
}

.nav_item1 {
  display: flex;
  justify-content: space-between;
  height: 1.16rem;
  background: #e8ebf5;
  border-radius: 0 0 0.2rem 0.2rem;
  line-height: 1rem;
  padding: 0 0.2rem 0 0.2rem;
  font-size: 0.42rem;
  color: #212c68;
}

.nav_item1 div:nth-of-type(1) {
  text-align: center;
}

.nav_item1 div:nth-last-of-type(1) {
  width: 1.12rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.total {
  width: 100%;
  height: 2rem;
  margin: auto;
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.total_item {
  width: 3.42rem;
  height: 1.78rem;
  text-align: center;
  background: #fff;
  box-shadow: 0px 4px 68px 0px rgba(39, 52, 125, 0.25);
  border-radius: 0.08rem;
}

.total_item span {
  font-size: 0.24rem;
  color: #212c68;
}

.total_item div {
  color: #ffb400;
  font-size: 0.42rem;
}

.ranking {
  width: 100%;
  height: auto;
  margin-top: 0.58rem;
  img {
    margin: auto;
    width: 3.06rem;
    height: 2rem;
  }
}
.ranking_zi {
  text-align: center;
  margin-top: 0.1rem;
  font-size: 0.28rem;
}
.fenbu {
  display: flex;
  justify-content: space-between;
}

.fenbu div {
  margin-right: 0.3rem;
  font-size: 0.26rem;
}

.ran_oitem {
  width: 6.84rem;
  margin: auto;
  border: 0.02rem solid #cfcfcf;
  height: 1.1rem;
  line-height: 1.1rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-size: 0.26rem;
  box-shadow: 0px 4px 28px 0px rgba(39, 52, 125, 0.05);
  border-radius: 0.16rem;
}

.pop {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  //display: flex;
  //align-items: center;
  //justify-content: center;
  z-index: 1;
}

.pop_message {
  width: 6rem;
  height: 6.68rem;
  background: #fff;
  border-radius: 0.2rem;
  z-index: 2;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pop_message img {
  width: 5rem;
  height: 5rem;
  margin-left: 0.45rem;
  margin-top: 0.25rem;
}

.pop_message div {
  width: 5.5rem;
  margin-left: 0.25rem;
  height: 1rem;
  font-size: 0.28rem;
}
</style>